<template>
  <div class="recommendation">
    <Scroll class="content">
      <div class="findItems" >
        <find-item v-for="(item,index) in hotRecommendation" :key="index" class="findItem" :findMessage="item"></find-item>
      </div>
    </Scroll>
  </div>
</template>

<script>
import findItem from './findItem.vue'
import Scroll from '@/components/common/scroll/Scroll.vue'
import {getHotRecommendation} from '@/network/publish'

export default {
  name: 'recommendation',
  data() {
    return {
      hotRecommendation: []
    }
  },

  computed:{
    // ...mapState(['publishData'])
  },
  components: {
     findItem ,
     Scroll,
  },
  mounted() {
      this.getRecommendationData()
  },
  methods: {
    async getRecommendationData() {
      const { data:{data:res} }  =  await getHotRecommendation()
      console.log(res);
      this.hotRecommendation = res
    },
  },
}
</script>

<style scoped>

/* 设置展示区样式 */
.recommendation {
 width: 100%;
 height: 100%;
 overflow: hidden;
}
  /* 滚动区域 */
.content {
  background-color: #E3EDF7;
  z-index: 999;
  overflow: hidden;
  position: absolute;
  top: 84px;
  bottom: 42px;
  left: 0;
  right: 0;
}
/* findItems样式 */
.findItems {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 创建两列 */
  grid-gap: 10px; /* 设置间距 */
}

.findItem {
    background-color: #fff;
    border-radius: 20px;
    height: 180px;
    width: 150px;
    margin: 10px;
    padding: 10px;
    box-shadow: 0 5px 2px #999999;
    display: flex;
    flex-direction: column;
}


</style>